iT邦幫忙

2022 iThome 鐵人賽

DAY 9
1

今日目標,透過 UserController 接收請求後顯示註冊頁面,並簡單地使用 Thymeleaf。

註冊頁面

  1. 在 user package 底下建立 java class 名稱為 UserController,並使其檔案內容為:
    package com.example.user;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.GetMapping;
    
    @Controller
    public class UserController {
        @GetMapping("/register")
        public String viewRegisterPage() {
            return "register";
        }
    }
    
    • @Controller:controller 聲明,讓程式知道他是 controller,才能做請求分發
      • 此方式註解的 class,其底下由 @GetMapping 或是 @PostMapping 註解的函式回傳的是「模板名稱」,所以上述的 code 是回傳 register.html,而非 register 字串
      • 回想之前的 HelloWorld 是用 @RestController 註解 class,它要回傳的就是一個字串,通常會用在 API 頁面上,很少會單純回傳一個字串,而是回傳一個物件(Object),並使其自動轉換成 JSON 的字串並顯示到頁面上
    • @GetMapping("/register"):透過 get method 請求,並且 url 是 /register,就會執行用此宣告的函式
      • 回想之前 HelloWorld,其路徑僅是 /,這表示根目錄,也就是單純只有主機名稱(host name)
  2. 在 CardsApplication 添加 @ComponentScan,整個檔案內容會是:
    package com.example.cards;
    
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    import org.springframework.boot.autoconfigure.domain.EntityScan;
    import org.springframework.context.annotation.ComponentScan;
    
    @SpringBootApplication
    @ComponentScan({
            "com.example",
    })
    @EntityScan({
            "com.example",
    })
    public class CardsApplication {
        public static void main(String[] args) {
            SpringApplication.run(CardsApplication.class, args);
        }
    }
    
  3. 在 src.main.resources.templates 底下建立一個 HTML file,名稱為 register,並使其檔案內容為:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <form method="post" action="/register">
            <input type="email" placeholder="Email" />
            <input type="text" placeholder="Username" />
            <input type="password" placeholder="Password" />
            <button type="submit">註冊</button>
        </form>
    </body>
    </html>
    
  4. 到網址 http://localhost:8080/register ,應該會看到

Thymeleaf

  1. 加入依賴
    <!-- thymeleaf -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
    
  2. 設定 Thymeleaf config,將以下加入到 application.properties
    # Thymeleaf
    spring.thymeleaf.prefix=classpath:/templates/
    spring.resources.static-locations=classpath:/static/
    spring.resources.cache-period=0
    
  3. 修改一下 src.main.resources.templates 的 register.html,使整個檔案內容是:
    <!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <h1 th:text="${name}"></h1>
        <form method="post" action="/register">
            <input type="email" id="email" name="email" placeholder="Email" />
            <input type="text" id="username" name="username" placeholder="Username" />
            <input type="password" id="password" name="password" placeholder="Password" />
            <button type="submit">註冊</button>
        </form>
    </body>
    </html>
    
    • xmlns:th="http://www.thymeleaf.org":只是用於告知 IntelliJ 有使用到 Thymeleaf,所以如果把這個拔掉,會發現下方 th: 變成紅色,但頁面並不會有所影響
    • <h1 th:text="${name}"></h1>:th 標籤語法,將在下方詳述,這邊是用 name 替換掉內容,其中 name 是從 controller 傳過去的變數名稱
  4. 修改 UserController,使整份檔案內容為:
    package com.example.user;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.GetMapping;
    
    @Controller
    public class UserController {
        @GetMapping("/register")
        public String viewRegisterPage(Model model) {
            model.addAttribute("name", "註冊");
            return "register";
        }
    }
    
    • model.addAttribute("name", "註冊"):用於傳遞變數到 template,第一個參數是變數名稱,第二個參數放這個變數存的值
  5. 等待 server reload,然後到 http://localhost:8080/register ,看到如下圖就表示成功~

常見的 th 標籤語法和功能

  • th:id:替換 id
  • th:text:替換內文
  • th:object:接受從 controller 傳過來的物件,亦可在 form 裡面傳遞資料到 controller,通常搭配 *{}
  • th:filed:綁定 form 的資料,傳到 controller
  • th:each:遍歷資料
  • th:onclcik:替換掉 html 的 onclick 屬性
  • th:block:生成一個區域(block),但此標籤不會出現在網頁原始碼內,通常配合 th:each 做遍歷顯示

上一篇
Day 07 - 懶到極致的配置
下一篇
Day 09 - 註冊功能
系列文
Spring Boot... 深不可測31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
npcenthusiasm
iT邦新手 5 級 ‧ 2023-01-04 22:51:49

按照順序走發現頁面跑不出來QQ,後來發現要先把 Thymeleaf 加入依賴後, http://localhost:8080/register 頁面才正常顯示~

我要留言

立即登入留言